
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Input, Card, Form, InputNumber } from 'antd';
import { messErr } from '@/utils/message';
import styles from './AddOne.less';

@Form.create()
class AddOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  open = (next = () => {}) => {
    this.setState({ visible: true }, next);
  };

  close = (next = () => {}) => {
    this.setState({
      visible: false,
    }, next);
  };

  handleOk = () => {
    const {
      handleSubmit,
      form: {
        validateFieldsAndScroll,
        resetFields,
      },
    } = this.props;
    validateFieldsAndScroll((errors, values) => {
      if(!errors) {
        const {
          machineDesc,
          price,
          contact,
        } = values;
        this.close(() => {
          handleSubmit({
            machineDesc,
            price,
            contact,
          });
          resetFields();
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };

    return (
      <Modal
        title="发布租赁信息"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={() => this.close()}
      >
        <Card bordered={false}>
          <Form.Item {...formItemLayout} label="农机型号">
            {getFieldDecorator('machineDesc', {
              rules: [{
                required: true,
                message: '请输入农机型号',
              }],
            })(
              <Input style={{ width: '100%' }} maxLength={50} />
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="价格">
            {getFieldDecorator('price', {
              rules: [{
                required: true,
                message: '请输入价格',
              }],
            })(
              <InputNumber style={{ width: '100%' }} maxLength={10} />
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="联系方式">
            {getFieldDecorator('contact', {
              rules: [{
                required: true,
                message: '请输入联系方式',
              }],
            })(
              <Input style={{ width: '100%' }} maxLength={11} />
            )}
          </Form.Item>
        </Card>
      </Modal>
    );
  }
}

AddOne.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

AddOne.defaultProps = {

};

export default AddOne;
